<template>
  <div id="app">
    <!-- 视图层 -->
    <div>age = {{ this.$store.state.age }}</div>
    <div>name = {{ this.$store.state.name }}</div>

    <!-- 使用mutations的几种方式 -->
    <!-- 方式1: -->
    <button @click="update">age+1</button>
    <button @click="updateByPayload">updateName:旺仔</button>

    <!-- 方式2, 通过mutations中的方法名 -->
    <button @click="updateAge">方式2的age+1</button>
    <!-- 方式2中带参数传递 -->
    <button @click="updateName('旺仔2')">方式2的修改name</button>
  </div>
</template>

<script>
// 方式2: 导入mapMutations辅助函数
import { mapMutations } from 'vuex'

export default {
  methods: {
      // 方式1:通过原始的$store.commit()
    update() { // 无参数传递
      // 参数1: mutations中定义的方法名.
      // 参数2: 载荷参数payload.
      this.$store.commit('updateAge')
    },
    updateByPayload() { // 带参数传递
      this.$store.commit('updateName', '旺仔')
    },

    // 方式2, 通过mapMutations辅助函数
    ...mapMutations(['updateAge', 'updateName'])
  }
}
</script>

<style>
</style>
